<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<#--<meta http-equiv="X-UA-Compatible” content=”IE=edge,chrome=1″ />-->
    <meta name="renderer" content="webkit">
    <title>用户后台管理系统</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

    <style>

        .login-container {

            -webkit-border-radius: 5px;
            border-radius: 15px;
            -moz-border-radius: 5px;
            background-clip: padding-box;
            margin: 240px auto;
            width: 350px;
            padding: 35px 35px 15px 35px;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;

        }

        label {
            width: 70px;
            text-align: left;

        }

        .form-control {
            width: 270px;
            flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;

        }

        .remember {
            width: 250px;
            text-align: left;

        }

        .forget {
            width: 500px;
            text-align: right;
            font-size: 14px;
            font-family: PingFang SC;

        }

        .remFor {
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

        .tabsUser {
            display: inline-block;
            margin-left: 0px;
            margin-right: 0px;
            text-align: center;
            font-size: 25px;
        }


    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin" id="app">

    <template>
        <!--背景图-->
        <div class="note" :style="note">

            <!--login框，表单+tab标签页的组合-->
            <div class="loginFrame">

                <!--表单组件放在外面，标签栏在里面-->
                <el-form ref="account" :model="account" :rules="rules" class="demo-ruleForm login-container">

                    <!--tab标签-->
                    <div class="formGroup">
                        <el-form-item label="账号" prop="username">
                            <el-input type="text" v-model="account.username" id="username" auto-complete="off"
                                      placeholder="请输入您的账号" class="form-control" @focus="changeUserName"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password" class="form-inline">
                            <el-input @keyup.enter.native="enterLogin" id="password" type="password"
                                      v-model="account.password" auto-complete="off" placeholder="请输入密码"
                                      class="form-control"></el-input>
                        </el-form-item>
                    </div>
                    <div class="remFor">
                        <el-checkbox label="记住密码" @change="rememberPwd" v-model="checked"></el-checkbox>

                    <#--<a href="'https://blog.csdn.net/Vanadis_outlook/article/details/72823024.html'" class="forget">忘记密码？</a>-->
                    </div>

                    <div class="formButton">
                        <el-form-item style="width:100%;">
                            <el-button type="primary" @click="loginValidate('account')" style="width:100%;">登录
                            </el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    <#--<el-dialog title="请选择组织" :visible.sync="dialogFormVisible">-->
    <#--<el-form >-->

    <#--<el-radio-group v-model="radio">-->
    <#--<el-radio :label="radio.id" v-for="radio in radios" :key="radio.id" style="width: 200px">{{radio.group_name}}</el-radio>-->
    <#--</el-radio-group>-->

    <#--</el-form>-->
    <#--<div slot="footer" class="dialog-footer">-->
    <#--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
    <#--<el-button type="primary" @click="registerLogin">确 定</el-button>-->
    <#--</div>-->
    <#--</el-dialog>-->
    </template>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
    //session过期后刷新父页面
    if (window != top)
        top.location.href = location.href;
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            note: {
                position: "absolute",
                top: "0px",
                left: "0px",
                width: "100%",
                height: "100%",
                backgroundImage: "url('https://pinzafile.oss-cn-shanghai.aliyuncs.com/logo/login-bg.png')",
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
            },
            account: {
                username: '',
                password: '',
            },
            rules: {
                username: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                },],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },]
            },
            checked: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            // radios: [],
            // radio: '',
            // radioSelected:{},
            // dialogFormVisible: false,
            // radioRules: {
            //   radio:[{
            //     required: true,
            //     message: '请选择一个组织',
            //     trigger: 'change'
            //   }],
            // },

        },

        methods: {
            changeUserName(){
                this.checked= false;
            },
            rememberPwd() {
                //判断是否存在过用户
                var storage = window.localStorage;
                if (this.checked) {
                    //存储到loaclStage
                    storage["username"] = this.account.username;
                    storage["password"] = this.account.password;
                    storage["isstorename"] = "yes";
                } else {
                    storage["username"] = "";
                    storage["password"] = "";
                    storage["isstorename"] = "no";
                }
            },
            enterLogin: function () {
                if (this.account.username != '' && this.account.password != '') {
                    this.login()
                } else {
                    this.$message({
                        type: 'error',
                        message: '请输入用户名和密码',
                    })
                    return false
                }
            },
            login() {
                $.ajax({
                    url: '/userLogin',
                    type: 'post',
                    data: this.account,
                    success: (result) => {
                        console.log(result.data);
                        if (result.ret) {
                            if (result.data === null) {
                                window.location.href = "/shopping/index.page";
                            } else {
                                window.location.href = result.data;
                            }
                        } else {
                            this.$message({
                                type: 'error',
                                message: '用户名或密码错误',
                            })
                        }
                    }
                });
            },
            loginValidate: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 发送ajax请求，验证。
                        this.login();
                        //成功之后进行结果显示
                        // if (bool) {
                        // if(type.length <= 1){

                        // }else{
                        // this.$message({
                        //     type: 'success',
                        //     message: '欢迎你：' + this.account.username + '!',
                        //     duration: 3000
                        // }),
                        // this.radios = type;
                        // this.radio=this.radios[0].id
                        // //判断是否打开组织选择弹窗 true：打开
                        // this.dialogFormVisible = true;
                        // }
                        // } else {
                        // }

                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入用户名和密码',
                        })
                        return false
                    }
                })
            },
            registerLogin: function () {
                //当前选中的组织ID
                var id = this.radio;
                $.ajax({
                    url: '/user/chooseGroup.json',
                    type: 'post',
                    data: {groupId: id},
                    success: function (result) {
                        if (result.ret) {
                            window.location.href = "/shopping/index.page";
                        } else {
                            alert(111);
                        }
                    }
                });
            }
        },
        mounted() {
            var storage = window.localStorage;
            if ("yes" == storage["isstorename"]) {
                this.checked = true;
                this.account.username = storage["username"];
                this.account.password = storage["password"];
            }
        },
    })
</script>
</body>

</html>